<!--
  文件描述：菜单添加/修改
  创建时间：2023/9/12 11:59
  创建人：二
-->
<template>
  <m-dialog
    :title="title"
    :visible="visible"
    width="500px"
    :show-close="true"
    :loading="loading"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="上级目类" prop="pid">
        <m-select-tree
          v-model="form.pid"
          node-key="id"
          :tree-data="treeData"
          @change="handleChange">
        </m-select-tree>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="权限标识" prop="role">
        <el-input v-model="form.role"></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="close" :disabled="loading">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()" :loading="loading">确 定</el-button>
    </template>
  </m-dialog>
</template>

<script>
export default {
  name: 'edit',
  data() {
    return {
      type: '', // 打开页面类型
      visible: false,
      loading: false,
      form: {
        pid: '1-1-2',
        name: '',
        role: ''
      },
      rules: {
        pid: [
          { required: true, trigger: 'change', message: '请选择上级目类' }
        ],
        name: [
          { required: true, trigger: 'blur', message: '请输入菜单名称' }
        ],
        role: [
          { required: true, trigger: 'blur', message: '请输入权限标识' }
        ]
      },
      treeData: [
        {
          id: '1',
          label: '一级 1',
          children: [
            {
              id: '1-1',
              label: '二级 1-1',
              children: [
                {
                  id: '1-1-1',
                  label: '三级 1-1-1'
                },
                {
                  id: '1-1-2',
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: '2',
          label: '一级 2'
        }
      ]
    }
  },
  computed: {
    title() {
      return this.type ? '新增' : '编辑'
    }
  },
  methods: {
    // 打开
    open(type = 'add', data = null) {
      this.type = type
      if(data) {
        this.form = this.mixinObjAssign(this.form, data);
      }
      this.visible = true;
    },
    // 关闭
    close() {
      this.loading = false;
      this.resetSearchForm();
      this.visible = false;
    },
    // 重置表单
    resetSearchForm() {
      this.$refs.form.resetFields();
    },
    // 提交
    handleSubmit() {
      console.log('form', this.form)
      this.$refs.form.validate( valid => {
        if(valid) {
          this.mixinMessageBoxConfirm('是否提交保存?').then(({instance, done}) => {
            this.loading = true;
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
                this.$message({
                  type: 'success',
                  message: '成功!'
                });
                this.close();
                this.$emit('success');
              }, 300);
            }, 2000);
          }).catch(() => {})
        }
        return false
      })
    },
    handleChange(e) {
      console.log('e', e, this.form)
    }
  }
}
</script>

<style scoped>

</style>
